<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流集散中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="navigation-helper.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .pulse-dot {
            animation: pulse-dot 2s infinite;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-cyan-600 px-6 py-4">
            <div class="flex items-center justify-between text-white">
                <i class="fas fa-arrow-left text-xl"></i>
                <h1 class="text-lg font-semibold">智慧物流中心</h1>
                <i class="fas fa-qrcode text-xl"></i>
            </div>
        </div>

        <!-- Real-time Stats -->
        <div class="bg-gradient-to-r from-blue-600 to-cyan-600 px-6 pb-6 -mt-1">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4">
                <h3 class="text-white text-sm font-semibold mb-3">实时物流数据</h3>
                <div class="grid grid-cols-3 gap-3 text-white">
                    <div>
                        <p class="text-2xl font-bold">12.8万</p>
                        <p class="text-xs opacity-80">今日处理包裹</p>
                        <div class="mt-1 flex items-center text-xs">
                            <i class="fas fa-arrow-up text-green-400 mr-1"></i>
                            <span class="text-green-400">+15.2%</span>
                        </div>
                    </div>
                    <div>
                        <p class="text-2xl font-bold">98.5%</p>
                        <p class="text-xs opacity-80">配送时效率</p>
                        <div class="mt-1 flex items-center text-xs">
                            <i class="fas fa-check-circle text-green-400 mr-1"></i>
                            <span class="text-green-400">优秀</span>
                        </div>
                    </div>
                    <div>
                        <p class="text-2xl font-bold">326</p>
                        <p class="text-xs opacity-80">运输车辆</p>
                        <div class="mt-1 flex items-center text-xs">
                            <span class="w-2 h-2 bg-green-400 rounded-full pulse-dot mr-1"></span>
                            <span>运行中</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-16">
            <!-- Hub Network Map -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    枢纽网络分布
                </h3>
                <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 relative h-48">
                    <!-- Map Background -->
                    <div class="absolute inset-0 opacity-10">
                        <svg viewBox="0 0 100 60" class="w-full h-full">
                            <path d="M10,30 Q25,20 40,25 T70,30 T90,25" stroke="#3B82F6" stroke-width="0.5" fill="none"/>
                            <path d="M5,40 Q30,35 50,40 T95,35" stroke="#3B82F6" stroke-width="0.5" fill="none"/>
                        </svg>
                    </div>
                    
                    <!-- Hub Points -->
                    <div class="relative h-full">
                        <!-- 华北 -->
                        <div class="absolute top-4 right-12">
                            <div class="relative">
                                <span class="w-3 h-3 bg-blue-600 rounded-full block"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">华北</span>
                                <span class="absolute top-4 -left-6 text-xs text-gray-500">北京枢纽</span>
                            </div>
                        </div>
                        
                        <!-- 华东 -->
                        <div class="absolute top-12 right-8">
                            <div class="relative">
                                <span class="w-4 h-4 bg-red-500 rounded-full block animate-pulse"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">华东</span>
                                <span class="absolute top-5 -left-6 text-xs text-gray-500">上海枢纽</span>
                            </div>
                        </div>
                        
                        <!-- 华南 -->
                        <div class="absolute bottom-8 right-16">
                            <div class="relative">
                                <span class="w-3 h-3 bg-green-600 rounded-full block"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">华南</span>
                                <span class="absolute top-4 -left-6 text-xs text-gray-500">广州枢纽</span>
                            </div>
                        </div>
                        
                        <!-- 华中 -->
                        <div class="absolute top-20 left-1/2 transform -translate-x-1/2">
                            <div class="relative">
                                <span class="w-3 h-3 bg-purple-600 rounded-full block"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">华中</span>
                                <span class="absolute top-4 -left-6 text-xs text-gray-500">武汉枢纽</span>
                            </div>
                        </div>
                        
                        <!-- 西南 -->
                        <div class="absolute bottom-12 left-12">
                            <div class="relative">
                                <span class="w-3 h-3 bg-orange-600 rounded-full block"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">西南</span>
                                <span class="absolute top-4 -left-6 text-xs text-gray-500">成都枢纽</span>
                            </div>
                        </div>
                        
                        <!-- 西北 -->
                        <div class="absolute top-8 left-8">
                            <div class="relative">
                                <span class="w-3 h-3 bg-indigo-600 rounded-full block"></span>
                                <span class="absolute -top-5 -left-4 text-xs font-semibold">西北</span>
                                <span class="absolute top-4 -left-6 text-xs text-gray-500">西安枢纽</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Legend -->
                    <div class="absolute bottom-2 left-2 flex items-center gap-3 text-xs">
                        <span class="flex items-center">
                            <span class="w-2 h-2 bg-red-500 rounded-full mr-1"></span>
                            繁忙
                        </span>
                        <span class="flex items-center">
                            <span class="w-2 h-2 bg-green-600 rounded-full mr-1"></span>
                            正常
                        </span>
                    </div>
                </div>
            </div>

            <!-- Logistics Partners -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                        物流合作伙伴
                    </span>
                    <button onclick="viewAllLogisticsPartners()" class="text-xs text-blue-600 hover:text-blue-800 transition-colors">查看全部 <i class="fas fa-chevron-right text-xs"></i></button>
                </h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-white border border-gray-200 rounded-lg p-3 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 bg-red-500 rounded-lg flex items-center justify-center text-white font-bold">
                            顺丰
                        </div>
                        <p class="text-xs text-gray-600">战略合作</p>
                        <p class="text-xs text-green-600 font-semibold">99.2%准时</p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-3 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
                            京东
                        </div>
                        <p class="text-xs text-gray-600">战略合作</p>
                        <p class="text-xs text-green-600 font-semibold">98.8%准时</p>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-3 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 bg-orange-500 rounded-lg flex items-center justify-center text-white font-bold">
                            菜鸟
                        </div>
                        <p class="text-xs text-gray-600">战略合作</p>
                        <p class="text-xs text-green-600 font-semibold">98.5%准时</p>
                    </div>
                </div>
            </div>

            <!-- Smart Warehouse -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    智能仓储系统
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3">
                        <i class="fas fa-robot text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-semibold text-sm mb-1">AGV机器人</h4>
                        <p class="text-xs text-gray-600 mb-2">256台运行中</p>
                        <div class="bg-blue-200 rounded-full h-1.5 mb-1">
                            <div class="bg-blue-600 h-1.5 rounded-full" style="width: 85%"></div>
                        </div>
                        <p class="text-xs text-blue-700">效率: 85%</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3">
                        <i class="fas fa-barcode text-2xl text-green-600 mb-2"></i>
                        <h4 class="font-semibold text-sm mb-1">自动分拣</h4>
                        <p class="text-xs text-gray-600 mb-2">8条产线运行</p>
                        <div class="bg-green-200 rounded-full h-1.5 mb-1">
                            <div class="bg-green-600 h-1.5 rounded-full" style="width: 92%"></div>
                        </div>
                        <p class="text-xs text-green-700">效率: 92%</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-3">
                        <i class="fas fa-warehouse text-2xl text-purple-600 mb-2"></i>
                        <h4 class="font-semibold text-sm mb-1">立体仓库</h4>
                        <p class="text-xs text-gray-600 mb-2">库位: 10万+</p>
                        <div class="bg-purple-200 rounded-full h-1.5 mb-1">
                            <div class="bg-purple-600 h-1.5 rounded-full" style="width: 78%"></div>
                        </div>
                        <p class="text-xs text-purple-700">占用率: 78%</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3">
                        <i class="fas fa-microchip text-2xl text-orange-600 mb-2"></i>
                        <h4 class="font-semibold text-sm mb-1">RFID系统</h4>
                        <p class="text-xs text-gray-600 mb-2">实时追踪</p>
                        <div class="bg-orange-200 rounded-full h-1.5 mb-1">
                            <div class="bg-orange-600 h-1.5 rounded-full" style="width: 96%"></div>
                        </div>
                        <p class="text-xs text-orange-700">准确率: 96%</p>
                    </div>
                </div>
            </div>

            <!-- Delivery Performance -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    配送时效分析
                </h3>
                <div class="space-y-3">
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium">24小时达</span>
                            <span class="text-sm font-semibold text-green-600">45%</span>
                        </div>
                        <div class="bg-gray-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-green-500 to-green-600 h-2 rounded-full" style="width: 45%"></div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">覆盖一二线城市</p>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium">48小时达</span>
                            <span class="text-sm font-semibold text-blue-600">35%</span>
                        </div>
                        <div class="bg-gray-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full" style="width: 35%"></div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">覆盖三四线城市</p>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm font-medium">72小时达</span>
                            <span class="text-sm font-semibold text-purple-600">20%</span>
                        </div>
                        <div class="bg-gray-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-purple-500 to-purple-600 h-2 rounded-full" style="width: 20%"></div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">覆盖偏远地区</p>
                    </div>
                </div>
            </div>

            <!-- Real-time Tracking -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    实时运输监控
                </h3>
                <div class="bg-gray-50 rounded-xl p-3 space-y-2">
                    <div class="flex items-center justify-between p-2 bg-white rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white mr-3">
                                <i class="fas fa-truck text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">京A12345</p>
                                <p class="text-xs text-gray-500">上海→杭州</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-green-600 font-semibold">运输中</p>
                            <p class="text-xs text-gray-500">预计2小时</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-2 bg-white rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
                                <i class="fas fa-truck text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">沪B67890</p>
                                <p class="text-xs text-gray-500">北京→天津</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-blue-600 font-semibold">装载中</p>
                            <p class="text-xs text-gray-500">预计30分钟</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-2 bg-white rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white mr-3">
                                <i class="fas fa-plane text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium">航班CZ3456</p>
                                <p class="text-xs text-gray-500">广州→成都</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-orange-600 font-semibold">飞行中</p>
                            <p class="text-xs text-gray-500">预计1.5小时</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

		<!-- Bottom Navigation -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200">
            <div class="flex justify-around py-2" id="bottom-nav">
                <a href="home-b2c.html" class="flex-1 text-center py-2">
                    <i class="fas fa-home text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">首页</p>
                </a>
                <a href="b2b-dashboard.html" class="flex-1 text-center py-2">
                    <i class="fas fa-chart-bar text-xl  text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">数据</p>
                </a>
                <a href="b2b-profile.html" class="flex-1 text-center py-2">
                    <i class="fas fa-user text-xl  text-indigo-600 mb-1"></i>
                    <p class="text-xs text-indigo-600">我的</p>
                </a>
            </div>
        </div>
    </div>

    <script>
        // View all logistics partners
        function viewAllLogisticsPartners() {
            window.location.href = 'logistics-partners.html';
        }

        // Initialize navigation
        document.addEventListener('DOMContentLoaded', function() {
            updateBottomNavigation();
            setupIframeMessaging(); // Enable iframe communication for status sync
        });
    </script>
</body>
</html>